<template>
  <Window
    v-if="operateDialogView"
    ref="windowRef"
    :width="width"
    :height="height"
    :title="dialogTitle"
    :modal="true"
    :actions="actions"
    style="display:none"
    @close="closed"
  >
    <component :is="getComponent" v-for="(item,index) in list" :key="index" :data="item" />
  </Window>
</template>

<script>
  import requireMixins from '@/Mixins/requireMixins.js'
  import { isEmpty } from '@/Utils/strUtil.js'
  import { Window } from '@progress/kendo-window-vue-wrapper'
  export default {
    name: 'KendoWindow',
    components: {
      'Window': Window
    },
    mixins: [requireMixins],
    props: {
      widowWidth: {
        type: Number,
        default() {
          return null
        }
      },
      widowHeight: {
        type: Number,
        default() {
          return null
        }
      },
      operateDialogView: {
        type: Boolean,
        default() {
          return false
        }
      },
      dialogTitle: {
        type: String,
        default() {
          return ''
        }
      },
      dialogName: {
        type: String,
        default() {
          return ''
        }
      },
      componentsList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        actions: ['Minimize',
                  'Maximize',
                  'Close'],
        width: this.widowWidth || parseFloat(`${document.documentElement.clientWidth}`) * 0.95,
        height: this.widowHeight || parseFloat(`${document.documentElement.clientHeight}`) * 0.85,
        list: this.componentsList,
        screenWidth: document.documentElement.clientWidth,
        screenHeight: document.documentElement.clientHeight
      }
    },
    watch: {
      componentsList: {
        immediate: true,
        handler() {
          return this.componentsListChange()
        }
      },
      operateDialogView: {
        immediate: true,
        handler() {
          return this.kendoWindowOperate()
        }
      },
      screenWidth: {
        immediate: true,
        handler(val) {
          console.log(val)
          return this.resizeDialog()
        }
      },
      screenHeight: {
        immediate: true,
        handler(val) {
          console.log(val)
          return this.resizeDialog()
        }
      }
    },
    mounted() {
      this.resizeDialog()
    },
    methods: {
      componentsListChange() {
        this.list = this.componentsList
      },
      kendoWindowOperate() {
        if (this.operateDialogView) {
          this.$nextTick(_ => {
            var window = this.$refs.windowRef.kendoWidget()
            window.center().open()
          })
        } else {
          const windowRef = this.$refs.windowRef
          if (!isEmpty(windowRef)) {
            const window = windowRef.kendoWidget()
            window.center().close()
          }
        }
      },
      closed() {
        this.$emit('beforeClose', true)
      },
      resizeDialog() {
        const _this = this
        window.onresize = () => {
          return (() => {
            // 可以在这里保存到浏览器中，也可以保存到其他地方
            const height = `${document.documentElement.clientHeight}`
            _this.height = parseFloat(height) * 0.75
            const width = `${document.documentElement.clientWidth}`
            _this.width = parseFloat(width) * 0.95
          })()
        }
      }
    }

  }
</script>

<style>

</style>
